<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
  </head>
  <body>
    <div class="avatar-wrapper">
      <!-- <img id="avatar" alt="" /> -->
      <input type="file" id="upload" />
    </div>

    <!-- 表单 -->
    <div class="weui-cells">
      <div
        class="weui-cell weui-cell_active weui-cell_select"
        role="button"
        aria-haspopup="listbox"
      >
        <div class="weui-cell__bd df jcsb avatar-box">
          <div class="weui-select">更换头像</div>
          <img class="avatar" alt=""/>
        </div>
      </div>
      <!-- 昵称 -->
      <label for="nickname" class="weui-cell weui-cell_active weui-cell_wrap">
        <div class="weui-cell__hd">
          <span class="weui-label">昵称</span>
        </div>
        <div class="weui-cell__bd">
          <input
            id="nickname"
            class="weui-input weui-cell__control weui-cell__control_flex"
            placeholder="昵称"
          />
        </div>
      </label>
      <!-- 性别 -->
      <div
        id="showPicker"
        role="button"
        aria-haspopup="listbox"
        class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after"
      >
        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
        <div class="weui-cell__bd"><div class="weui-select sex">请选择性别</div></div>
      </div>
      <!-- 生日 -->
      <div
        class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after"
        role="button"
        aria-haspopup="listbox"
        id="showDatePicker"
      >
      <div class="weui-cell__hd"><label class="weui-label">生日</label></div>
      <div class="weui-cell__bd"><div class="weui-select mybirthday"></div></div>
      </div>
      <!-- 省份 -->
      <div
        id="showProvince"
        role="button"
        aria-haspopup="listbox"
        class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after"
      >
        <div class="weui-cell__hd"><label class="weui-label">省份</label></div>
        <div class="weui-cell__bd"><div class="weui-select shengfen">请选择省份</div></div>
      </div>
      <!-- 城市 -->
      <div
        id="showCity"
        role="button"
        aria-haspopup="listbox"
        class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after"
      >
        <div class="weui-cell__hd"><label class="weui-label">城市</label></div>
        <div class="weui-cell__bd"><div class="weui-select mycity">请选择城市</div></div>
      </div>
      <!-- 个人简介 -->
      <div class="weui-cells__group weui-cells__group_form">
        <div class="weui-cells__title">问题描述</div>
        <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_active">
            <div class="weui-cell__bd">
              <textarea
                class="weui-textarea textarea"
                placeholder="请描述你所发生的问题"
                rows="3"
                maxlength="50"
              ></textarea>
              <div role="option" aria-live="polite" class="weui-textarea-counter">
                <span class="font_num"> 0</span>
                /50
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 保存信息 -->
      <div class="weui-form__opr-area">
        <a role="button" class="weui-btn weui-btn_primary sure_bt" href="javascript:" id="showTooltips">
          保存信息
        </a>
      </div>
    </div>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
  </body>
</html>
